<template>
  <div>
    <van-nav-bar title="检测报告" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="list-box">
      <div class="list-item" v-for="(item,index) in listhistory" :key="index">
        <div>
          检测日期：
          <span>{{item.time}}</span>
        </div>
        <div>
          检测内容：
          <span>{{item.content}}</span>
        </div>
        <div class="divider"></div>
        <div class="list-item-bottom">
          <p>
            检测费用：
            <span>{{item.price}}元</span>
          </p>
          <van-button type="default" round size="small" @click="download(item.url,item.filename)" :disabled="disabled">下载检测报告</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Button } from "vant";
export default {
  components: {
    [Button.name]: Button
  },
  data() {
    return {
      disabled:false,
      listhistory: [
        {
          time: "2021-1-10",
          content: "血常规",
          price: "198",
          filename: "千锋PMP线上课程列表-(备考2021.6月考试).xlsx",
          url:
            "http://qfzy.static.1000phone.net/v1/%2Fdoc%2F2021-02-25/%E5%8D%83%E9%94%8BPMP%E7%BA%BF%E4%B8%8A%E8%AF%BE%E7%A8%8B%E5%88%97%E8%A1%A8-%28%E5%A4%87%E8%80%832021.6%E6%9C%88%E8%80%83%E8%AF%95%29.xlsx"
        },
        {
          time: "2021-3-22",
          content: "尿液检测",
          price: "128",
          filename: "03-PMP考点参考（2019.12.12）.xlsx",
          url:
            "http://qfzy.static.1000phone.net/v1/%2Fdoc%2F2021-02-25/03-PMP%E8%80%83%E7%82%B9%E5%8F%82%E8%80%83%EF%BC%882019.12.12%EF%BC%89.xlsx"
        }
      ]
    };
  },
  created() {
    this.$store.commit("set_bottombar_visible", false);
  },
  methods: {
    onClickLeft() {
      //   this.$toast('返回');
      this.$router.go(-1);
      this.$store.commit("set_bottombar_visible", true);
    },
    download(fileurl,filename) {
      const that = this;
      that.disabled = true;
      //文件下载
      let url = fileurl; // 拼接下载地址
      let a = document.createElement("a");
      a.download = filename;
      a.href = url;
      a.target = "_blank";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      setTimeout(()=>{
          that.disabled = false;
      },10000)
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: #0d9df0;
}
/deep/ .van-nav-bar .van-icon {
  color: #ffffff;
}
/deep/ .van-nav-bar__text {
  color: #ffffff;
}
/deep/ .van-nav-bar__title {
  color: #ffffff;
}
.list-box {
  padding: 12px 12px 0 12px;
  .list-item {
    border-radius: 20px;
    padding: 12px 10px;
    font-size: 16px;
    line-height: 30px;
    color: #333333;
    background-color: #00b7ff; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to right, #e6f2fff0, #94c9ff);
    margin-top: 12px;
    span {
      color: #666666;
    }
    .list-item-bottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 10px;
      p {
        padding: 0;
        margin: 0;
      }
    }
  }
  .list-item:first-child{
      margin-top: 0px;
  }
}
.divider {
  background-color: #00b7ff;
  height: 1px;
}
</style>